<template>
  <svg @click="$emit('myClick',$event)" class="icon" aria-hidden="true" width="16" height="16">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
import '@/assets/icon.js'
import { toRefs,computed } from 'vue'
export default {
    name: 'SvgIcon',
    emits: ['myClick'],
    props:{
        name: {
            type:String,
            required: true
        }
    },
    setup(props){
        const {name} = toRefs(props)

        const iconName = computed(() => {
            return `#icon-${name.value}`
        })

        return{
            iconName
        }
    }
}
</script>

<style scoped>
.icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
}
</style>